<template>
  <div class="nav-back-header">
    <div class="back-title">
      <div class="back-button">
        <img class="back-cover" src="@/assets/images/arrow-left.png" @click="onNavigationBack()"/>
      </div>
      <strong>{{ title }}</strong>
      <span class="head-context">{{ context }}</span>
    </div>
    <img v-if="isDivider" class="divider" src="@/assets/images/divider.png" />
    <slot />
  </div>
</template>
<script>
export default {
  props: ['title', 'isDivider', 'context'],
  methods: {
    onNavigationBack(){
      this.$router.go(-1);
    }
  },
}
</script>
<style lang="scss" scoped>
.nav-back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 8;
  height: 46px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  .back-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 22px;
    .back-button {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin-right: 12px;
      border: none;
      width: 24px;
      height: 24px;
      background: #4b5a95;
      border-radius: 12px;
      cursor: pointer;
      .back-cover {
        width: 16px;
        height: 16px;
      }
    }
    .head-context {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      margin-left: 10px;
      font-weight: normal;
    }
  }
  .divider {
    margin: 0 20px;
    width: 1px;
    height: 16px;
  }
}
</style>